<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link href="../../css/xq.css">
		<!-- 引入组件 -->
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/vant.min.js"></script>
		<script src="../../js/ajax.js"></script>			
		<title></title>
		<style type="text/css">
			#lb img{
				height: 100px;
				width: 100px;
				margin-left: 5px;
				margin-bottom: -15px;
			}
			#sa{
				width: 95%;
				height: 40px;
				margin: 10px auto;
				border-radius: 30px/30px;
				background-color:  white;
			}
			#sa a{
				color: rgba(0,0,0,0.5);
			}
			#sa a:hover{
				color: rgba(0,0,0,0.5);
			}
			li{
				list-style: none;
			}
			#swipe-zixun {
				text-indent: 25px;
				background-color: white;
				border-radius: 9px;
				height: 30px;
				margin: 11px 24px 1px 24px;
			}
			#zixun {
				clear: both;
				background-color: #CCCCCC;
				height: 60px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row>
					<van-col span="24">
						<van-search background="red" placeholder="搜索商品名称" show-action shape="round">
							<div slot="action">
								<van-icon name="chat-o" size="25px" color="white" style="margin-top:-10px;margin-top: 15px;" />
							</div>
						</van-search>
					</van-col>
				</van-row>										
			</header>
			<section style="background-color:  #E5E5E5;">
				<van-swipe :autoplay="3000" indicator-color="white">					
					<van-swipe-item v-for="(image,index) in images" :key="index">
						<img :src="image.ImageUrl" style="height: 200px;width:100%;"/>
					</van-swipe-item>						 	  
				</van-swipe>
				<div id="sa">
					<van-row>
						<van-col span="4" style="text-align: center;line-height: 40px;color: red;font-size: 12px;">
							<a style="color: red;"href="javascript:;">资讯</a>
							<span style="border: 0.5px solid black;margin-left: 10px;"></span>
						</van-col>						
						<van-col span="16">
							<!-- <van-notice-bar	text="特价了,欢迎前来购买喽,动动手指赶快下单吧."
							 left-icon="volume-o"></van-notice-bar> -->
							 <van-swipe id="swipe-zixun" :autoplay="1000" :show-indicators="false" vertical>
							 	<van-swipe-item>玩转高冷帅气装扮</van-swipe-item>
							 	<van-swipe-item>小米9出现花屏故障</van-swipe-item>
							 	<van-swipe-item>为啥主板价格还有差</van-swipe-item>
							 	<van-swipe-item>爬楼梯有助于顺产？</van-swipe-item>
							 </van-swipe>
						</van-col>	
						<van-col span="4" style="text-align: center;line-height: 40px;color: rgba(0,0,0,0.5);font-size: 12px;">
							<span style="border: 0.5px solid black;margin-right: 10px;"></span>
							<a style="color: red;"href="javascript:;">更多</a>
							</van-col>						
					</van-row>	
				</div>			
				<van-row style="background-color: #F8F8F8; margin-top:10px;padding-left: 15px;">				    
				   <van-col span="6" v-for="item in type">
				    	<div style="width: 45px;height: 45px; border-radius: 15px/15px;background-color: plum;
							font-size: 25px;margin-top: 10px;margin-left: 10px;color: white;text-align: center;line-height: 45px;">
				    		{{item.Name[0]}}	
				    	</div>	
						<div style="font-size: 12px;margin-left: 10px;margin-top:5px;color: darkgray;margin-bottom: 5px;">
							{{item.Name}}
						</div>								 
				      </van-col>												   
				</van-row>	
				<van-row>
					<van-col span="6">热门推荐</van-col>
				</van-row>
				<van-row>
					<van-col span="8">
						<img src="hot.GoodsImageUrl" onerror="this.src='../../img/tuijian.jpg'" style="width: 110px;">					
					</van-col>							
				</van-row>
				<div id="lb">	
					<van-row>
						<van-col span="6">商品列表</van-col>
					</van-row>									
					<van-row>
						<van-col span="24">
							<li v-for="(item, index) in list" :name="item.id">
								<van-card :num="item.count" :price="item.RealPrice" :origin-price="item.MarketPrice" :title="item.Name" @click="onClickUrl(index)">
									<img slot="thumb" :src="item.GoodsImageUrl.src" onerror="this.src='../../img/photo.png'" />
									<span slot="footer">
										<label style="padding-right: 20%;">累计销售{{item.VirtualSaleCount}}</label>
										<label>{{item.BrowseCount}}次浏览</label>
									</span>
								</van-card>
							</li>
						</van-col>
					</van-row>						
				</div>							
			</section>
			<footer>
				
			</footer>
		</div>
		<script type="text/javascript">			
			var vm=new Vue({
				el:"#app",
				data:{
					images:[],
					type:[],
					hot:[],
					zixun:[],
					list: [] //产品列表
				},
				created:function(){
					_this=this;
					ajax({
						url:"http://dsapi.ysd3g.com/api/IndexData",
						dataType:"jsonp",
						data:{
							p: 1
						},
						success:function(res){
							_this.images=res.Data.CarouselFigureList;
							_this.hot=res.Data.GoodsRecommendList;
							_this.type=res.Data.HotGoodsTypeList;
							_this.zixun=res.Data.InformationList;
							console.log(res);
						}
					}),
					ajax({
						url:"http://dsapi.ysd3g.com/api/IndexGoodsData",
						dataType:"jsonp",
						data:{
							p:1
						},
						success:function(res){	
							_this.list=res.Data;
							console.log(res);
						}
					})
				},
				methods: {				
					onClickUrl: function(i) {
						console.log(i);
						console.log(this.list[i]);
						var id = this.list[i].Id;
						console.log(id);
						var w = plus.webview.create("shopxq.html", "shopxq", {}, {
							ID: id
						}); 
						w.show();
						console.log(w.ID);
					},

				}
			})
		</script>
	</body>
</html>
